<script setup lang="ts">
import { ref, onMounted,reactive, UnwrapRef, computed } from 'vue'
import { teachClassesUser } from '../../stores/api/class'
import { useCounterStore } from '../../stores/counter'
import { useRoute, useRouter } from "vue-router";
import type { TableProps } from 'ant-design-vue';
import { ImgUrlPrefix } from '../../utils/config'
import { message } from 'ant-design-vue';
type Key = string | number;
const store = useCounterStore()
const router:any = useRouter()
const route:any = useRoute()
const loading:any = ref(false)
const data_list:any = ref([])
const tabListNoTitle = [
  {
    key: 'record',
    tab: '详情',
  }
];
const noTitleKey = ref('record');
const pagination = reactive({
  total: 1,
  current: 1,
  pageSize: 15,
});
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '昵称',
    dataIndex: 'nick_name',
    key: 'nick_name'
  },
  {
    title: '学员账号',
    dataIndex: 'mobile',
    key: 'mobile'
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender'
  }, 
  {
    title: '权限过期时间',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
  },
];

const handleTableChange: TableProps['onChange'] = (
  pag: { pageSize: number; current: number }
) => {
  console.log(pag?.current)
  pagination.current = pag?.current
  getClassesUserList()
};
// 用户会员
const getClassesUserList = () => {
  loading.value = true
    teachClassesUser({  page:  pagination.current, id: route.query.id }, 'post').then((res: any) => {
        console.log(res)
        if(res.code == 200) {
            data_list.value = res.data
        } else {
            message.error(res.msg);
        }
        loading.value = false
    }).catch((err: any) => {
        console.log(err)
        loading.value = false
    })
}
const userInfo = computed(() => {
  return data_list.value.map(item => {
       return { ...item, avatar: item.avatar && item.avatar == 'def-avatar.png' ? imgUrl(item.avatar) : getImgUrl(item.avatar),created_at: store.timestampChangDate(item.created_at * 1000), updated_at: store.timestampChangDate(item.updated_at * 1000), status: item.status > 100000000 ? store.timestampChangDate(item.status * 1000) : '--' }
  })
})

const onTabChange = (value: string) => {
  console.log(value);
  noTitleKey.value = value;
  if(value == 'record') {
    getClassesUserList()
  }
}

// 图片地址拼接
const getImgUrl = (val) => {
    const url = ImgUrlPrefix(val)
    return url
}
const imgUrl = (val) => {
    if(val == 'def-avatar.png') {
        return new URL(`../../assets/${val}`, import.meta.url).href
    } else {
        return val
    }
}

onMounted(() => {
  getClassesUserList()
})
</script>

<template>
    <div class="homeworkDetails">
        <a-page-header
            style="border: none;padding: 0"
            title="详情"
            sub-title=""
            @back="() => $router.go(-1)"
        />
        <a-card
            style="width: 100%"
            :tab-list="tabListNoTitle"
            :active-tab-key="noTitleKey"
            @tabChange="key => onTabChange(key)"
        >
            <div v-if="noTitleKey === 'record'">
                <div class="list-box">
                    <!-- <a-table :columns="columns" :pagination="pagination"
                        :loading="loading" :data-source="data_list" @change="handleTableChange">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.key === 'id'">
                                <span>
                                    {{ record.id }}
                                </span>
                            </template>
                            <template v-if="column.key === 'nick_name'">
                                <span>
                                {{ record.nick_name }}
                                </span>
                            </template>
                            <template v-if="column.key === 'gender'">
                                <span v-if="record.gender == 1">男</span>
                                <span v-else-if="record.gender == 2">女</span>
                                <span v-else>--</span>
                            </template>
                            <template v-if="column.key === 'mobile'">
                                <span>
                                {{ record.mobile }}
                                </span>
                            </template>
                            <template v-if="column.key === 'status'">
                                <span>
                                {{ record.status > 100000000 ? store.timestampChangDate(record.status * 1000) : '--'  }}
                                </span>
                            </template>
                            <template v-if="column.key === 'created_at'">
                                <span>
                                {{ store.timestampChangDate(record.created_at * 1000) || '--' }}
                                </span>
                            </template>
                        </template>
                    </a-table> -->
                    <a-descriptions title="" v-for="item in userInfo" :key="item.id" bordered size="small">
                      <a-descriptions-item label="学员账号">{{item.mobile}}</a-descriptions-item>
                      <a-descriptions-item label="昵称">{{ item.nick_name }}</a-descriptions-item>
                      <a-descriptions-item label="头像">
                        <img :src="item.avatar ? item.avatar : ''" alt="" class="thumbnail_">
                      </a-descriptions-item>
                      <a-descriptions-item label="性别">
                        <span v-if="item.gender == 1">男</span>
                        <span v-else-if="item.gender == 2">女</span>
                        <span v-else>--</span>
                      </a-descriptions-item>
                      <a-descriptions-item label="简介">
                         {{ item.intro }}
                      </a-descriptions-item>
                      <a-descriptions-item label="创建时间">
                         {{ item.created_at}}
                      </a-descriptions-item>
                      <a-descriptions-item label="更新时间">
                         {{ item.updated_at }}
                      </a-descriptions-item>
                      <a-descriptions-item label="会员过期时间">
                        <span>
                        {{ item.status }}
                        </span>
                      </a-descriptions-item>
                    </a-descriptions>
                </div>
            </div>
            <!-- <template #tabBarExtraContent>
                <a @click="handleAdd" >添加</a>
            </template> -->
        </a-card>
    </div>
</template>

<style scoped>
.homeworkDetails{
    padding: 15px;
}
.thumbnail_{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
</style>